<template>
    <div class="header">
        <div class="wrap content">
            <RouterLink to="/">
            <i class="iconfont icon-taiyang-copy"></i>
            <h1>新中地天气</h1>
            </RouterLink>
            <div class="weather-local">
                <h4>{{ localWeather.city }}</h4>
                <span>
                    实时天气: {{ localWeather.weather }} {{ localWeather.temperature }}℃&nbsp;&nbsp;&nbsp;
                    {{ localWeather.winddirection }}风{{ localWeather.windpower }}级
                </span>
            </div>
            <div class="info">
                <i class="iconfont icon-tishi" @click="TipsShow = true"></i>
                <i class="iconfont icon-tianjia-1" @click="handleAddCityWeather" v-if="iconShow"></i>
            </div>
        </div>
    </div>
    <Tips :TipsShow="TipsShow" @handleClose="TipsShow = false" />
</template>

<script setup>
import { ref,computed,onMounted,watch } from 'vue'
import { getCityByIP,getBaseWeatherByAdcode } from '@/api/index.js'
import { useRoute } from 'vue-router'
import { WeatherStore } from '@/stores/counter.js'
import { storeToRefs } from 'pinia'
import Tips from './Tips.vue'

const localWeather = ref({})
const searchCityWeather = ref({})
const TipsShow = ref(false)
const route = useRoute()

const weatherStore = WeatherStore()
const { addCityWeather } = weatherStore
const { cityWeatherList } = storeToRefs(weatherStore)

const iconShow = computed(() => {
    return (
        route.name === 'cityweather' &&
        !cityWeatherList.value.find((item) => item.city === route.query.search)
    )//满足两个条件加号才会显示
    //1,当前页面是CityWeather的url界面
    //2,cityWeatherList中没有当前搜索的城市(!undefined === true)
})

//添加搜索城市天气信息进local
const handleAddCityWeather = () => {
    addCityWeather(searchCityWeather.value)
}

//获取当前城市实时天气信息
onMounted(async() => {
    const res = await getCityByIP()
    const res2 = await getBaseWeatherByAdcode(res.adcode)
    localWeather.value = res2.lives[0];
})

//监听路由变化,获取城市天气信息
watch(
    route,
    async () => {
        if(route.name === 'cityweather') {
            const res = await getBaseWeatherByAdcode(route.params.Adcode)
            searchCityWeather.value = res.lives[0];
        }
    },
    { immediate:true }
)
</script>

<style lang="scss" scoped>
@import url('//at.alicdn.com/t/c/font_4922263_oe6zac2iehg.css');
.header {
    position:sticky;
    top: -1px;
    width: 100%;
    height: 80px;
    color: #fff;
    background-color: #00668a;
    box-shadow: 0 3px 4px #304b5f;
    z-index: 999;
    h1{
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .content {
        height: 100%;
        display: flex;
        gap: 20px;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        .router-link-active {
            display: flex;
            gap: 10px;
            color: #fff;
            font-size: 24px;
            text-decoration: none;
            i {
                font-size: 32px;
            }
        }
        .weather-local {
            flex: 1;
            display: flex;
            gap: 1rem;
            align-items: center;
            h4 {
                font-size: 1.125rem;
                line-height: 1.75rem;
            }
            span {
                font-size: 0.875rem;
                line-height: 1.25rem;
            }
        }
        .info {
            i {
                cursor: pointer;
                font-size: 24px;
                margin-left: 2px;
                &:hover{
                    color: #02445c;
                }
            }
        }
    }
}
</style>